<template>
<!-- 电影原声 -->
  <div class="film-music">
    <header>
      <div>电影原声</div>
      <div class="right">
        <span v-if="movie && movie.musicNum">{{ movie.musicNum }}首</span>
        <img src="../assets/img/arrow-right-black.png" alt="" />
      </div>
    </header>
    <div class="music-box">
      <div class="music-box-inner-wrap">
        <img src="../assets/img/film-music-icon.png" alt="" />
      </div>
      <div class="music-info">
        <div class="music-info-inner">
          <div class="name" v-if="movie && movie.musicName">
            {{ movie.musicName }}
          </div>
          <div class="author" v-if="movie && movie.musicStar">
            {{ movie.musicStar }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        movie:Object
    }
};
</script>

<style lang="less" scoped>
.film-music {
  background-color: #fff;
  margin-top: 12px;
  header {
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14.5px 0 15px;
    font-size: 15px;
    color: #333;
    .right {
      font-size: 13px;
      color: #666;
      img {
        width: 6px;
        display: inline-block;
        margin-left: 4.5px;
      }
    }
  }
  .music-box {
    padding: 0 15px 15px;
    display: flex;
    .music-box-inner-wrap {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      img {
        display: inline-block;
        height: 70px;
      }
    }
    .music-info {
      padding-left: 10px;
      height: 70px;
      flex-grow: 1;
      overflow: hidden;
      position: relative;
      display: inline-block;
      .music-info-inner {
        .name {
          font-size: 15px;
          color: #333;
          margin-top: 12px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .author {
          font-size: 13px;
          color: #999;
          margin-top: 3px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      &::after {
        box-sizing: border-box;
        content: "";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
        border-radius: 1px;
        transform: scale(0.5);
        transform-origin: top left;
      }
    }
  }
}
</style>